<template>
	<view class="contract">
		<view class="contract-top flex-center-between">
			<view class="contract-top-tit uni-h5">是否需要合同：</view>
			<radio-group @change="contractTypeChange">
				<label class="radio">
					<radio value="0" :checked="curContractType === '0'" />否
				</label>
				<label class="radio">
					<radio value="1" :checked="curContractType === '1'" />是
				</label>
			</radio-group>
		</view>
		<view v-if="curContractType === '1'" class="contract-detail">
			<view class="contract-detail-tit uni-h5">
				合同信息填写：
			</view>
			<view class="contract-detail-con">
				<view class="contract-detail-con-item flex-center-between">
					<text class="contract-detail-con-item-name">甲方(承租方)</text>
					<input
						class="contract-detail-con-item-value"
						type="text"
						:value="contractData.Acompany"
						placeholder="请输入甲方(承租方)"
						data-name="Acompany"
						@input="inputChange" />
				</view>
				<view class="contract-detail-con-item flex-center-between">
					<text class="contract-detail-con-item-name">签订日期</text>
					<picker mode="date" :value="date" @change="bindDateChange">
						<text class="value">{{date}}</text>
						<uni-icon type="arrowright" size="20" color="#999"></uni-icon>
					</picker>
				</view>
				<view class="contract-detail-con-item flex-center-between">
					<text class="contract-detail-con-item-name">甲方代表</text>
					<input
						class="contract-detail-con-item-value"
						type="text"
						:value="contractData.Aagent"
						placeholder="请输入甲方代表"
						data-name="Aagent"
						@input="inputChange" />
				</view>
				<view class="contract-detail-con-item flex-center-between">
					<text class="contract-detail-con-item-name">电话</text>
					<input
						class="contract-detail-con-item-value"
						type="number"
						:value="contractData.Aphone"
						placeholder="请输入电话"
						data-name="Aphone"
						@input="inputChange" />
				</view>
				
				<view>
					<text class="address-name">公司地址</text>
					<textarea
						class="address-area"
						:value="contractData.Aaddress"
						placeholder="请输入公司地址"
						data-name="Aaddress"
						@input="inputChange" />
				</view>
			</view>
			<view class="agreement">
				查看
				<text class="color-important" @click="previewDocument">《合同条例》</text>
			</view>
			<view class="contract-submit flex-center-between">
				<!-- <button
					class="order-submit-price"
					>
					查看详情
				</button> -->
				<button
					class="order-submit-confirm"
					@click="submitContract">
					确定
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				curContractType: '0', //0：不需要合同，1:需要合同
				contractData: {
					Acompany: "",
					Asign_date: "",
					Aagent: "",
					number: "",
					Aaddress: "",
				},
				newContractId: null,
				date: currentDate,
			}
		},
		onLoad(option) {
			this.gatContractData()
			this.getStorageData()
		},
		methods: {
			/**
			 * 获取合同数据
			 */
			async gatContractData() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/contract/last',
					data: {}
				})
				if (res.status === 1) {
					if (res.data) {
						this.contractData = res.data
						this.date = res.data.Asign_date
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 新增or修改合同详情数据
			 */
			async changeContractData() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/contract/add',
					data: {
						party_a: this.contractData.Acompany,
						date: this.date,
						delegate: this.contractData.Aagent,
						phone: this.contractData.Aphone,
						address: this.contractData.Aaddress,
					}
				})
				if (res.status === 1) {
					this.newContractId = res.data
					this.setStorage()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * @desc 预览合同文件
			 */
			previewDocument(){
				let url = 'https://lease.litree.mixiot.top/uploads/controct.pdf'
				uni.showLoading({
				    title: '加载中...'
				});
				uni.downloadFile({
				  url: url,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
						uni.hideLoading();
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			},
			/**
			 * 缓存数据
			 */
			setStorage(){
				uni.setStorageSync('CONTRACT', {
					contractId: this.curContractType == '0' ? 0 : this.newContractId,
					contractPartyA: this.curContractType == '0' ? '否' : this.contractData.Acompany,
				})
				uni.navigateBack()
			},
			/**
			 * 提交合同
			 */
			submitContract () {
				if (this.curContractType == '1') {
					this.changeContractData()
				} else {
					this.setStorage()
				}
			},
			/**
			 * 获取缓存合同数据
			 */
			getStorageData() {
				try {
					const value = uni.getStorageSync('CONTRACT')
					if (value.contractId && value.contractId !== 0) {
						this.curContractType = '1'
					}
				} catch (e) {
					// error
				}
			},
			/**
			 * 切换合同需要or不需要
			 * @param {Object} e
			 */
			contractTypeChange(e) {
				this.curContractType = e.target.value
			},
			/**
			 * 监听输入框变化
			 * @param {Object} e
			 */
			inputChange(e) {
				this.contractData[e.target.dataset.name] = e.detail.value
			},
			/**
			 * 监听日期变化
			 * @param {Object} e
			 */
			bindDateChange(e) {
				this.date = e.target.value
			},
			/**
			 * 日期格式化
			 */
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			/**
			 * 返回
			 */
			pageBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.contract{
		height: 100%;
		&-top{
			height: 120rpx;
			padding: 0 40rpx;
			margin-top: 20rpx;
			background: $uni-bg-color;
			.radio{
				margin-left: 48rpx;
			}
		}
		&-detail{
			&-tit{
				padding-left: 40rpx;
				line-height: 90rpx;
			}
			&-right{
				margin-left: 300rpx;
				color: #00b5c4;
				font-size: 28rpx;
			}
			&-con{
				padding: 0 40rpx;
				border-top: 1rpx solid $uni-border-color;
				background: $uni-bg-color;
				&-item{
					height: 110rpx;
					border-bottom: 1rpx solid $uni-border-color;
					&:last-child{
						border-bottom: none;
					}
					&-name{
						color: $uni-text-color-grey2;
						width: 240rpx;
					}
					&-value{
						width: 100%;
						text-align: right;
					}
				}
				.address-name{
					color: $uni-text-color-grey2;
					line-height: 60rpx;
				}
				.address-area{
					width: 650rpx;
					height: 100rpx;
					margin: 20rpx auto;
					font-size: $uni-font-size-sm2;
				}
			}
		}
		.submit-btn{
			padding: 0 30rpx;
		}
		.contract-submit{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 106rpx;
			// border-top: 1rpx solid $uni-border-color;
			background: $uni-bg-color;
			.order-submit-price{
				// width: 238rpx;
				width: 50%;
				height: 106rpx;
				line-height: 106rpx;
				text-align: center;
				font-size: $uni-font-size-base;
				border-radius: 0;
				border: none;
				// color: $uni-text-color-inverse;
				background: #ffffff;
			}
			.order-submit-confirm{
				width: 750rpx;
				// width: 238rpx;
				height: 106rpx;
				line-height: 106rpx;
				text-align: center;
				font-size: $uni-font-size-base;
				border-radius: 0;
				border: none;
				color: $uni-text-color-inverse;
				background: $uni-color-theme;
			}
			button::after{
				border: 0;
			}
		}
	}
	.agreement{
		text-align: right;
		line-height: 100rpx;
		margin-right: 30rpx;
		color: $uni-text-color-grey;
		font-size: $uni-font-size-sm;
		.checkbox-group{
			display: inline-block;
		}
	}
</style>
